import StandModal from '@/components/StandModal';
import { View } from '@tarojs/components';
import React from 'react';
import { connect } from 'react-redux';
import { useDidShow } from '@tarojs/taro';
import './index.scss';

const PointRuleContent = ({ pointConfig }) => {
  return (
    <View className="rule-content">
      <View className="wrap">
        <View className="sub-header">使用条件</View>
        <View className="line">1、{pointConfig?.offsetPriceMinWord}；</View>
        <View className="line">2、{pointConfig?.offsetPointMinWord}；</View>
        <View className="line">3、{pointConfig?.offsetPriceMaxWord}</View>
      </View>

      <View className="wrap">
        <View className="sub-header">使用数量</View>
        <View className="line">1、使用积分数量为{pointConfig?.exchangeRate}的整倍数；</View>
        <View className="line">2、{pointConfig?.exchangeRateWord}。</View>
      </View>
    </View>
  );
};

const PointRule = ({ dispatch, pointConfig, isOpened, onClose }) => {
  useDidShow(() => {
    dispatch({
      type: 'otherApi/getPointConfig',
    });
  });

  return (
    <StandModal
      {...{
        className: 'PointRule',

        isOpened,

        cancelText: '确定',
        onClose,

        title: '积分使用规则',
        content: <PointRuleContent pointConfig={pointConfig} />,
      }}
    />
  );
};
export default connect(({ loading, otherApi }) => ({
  loading,
  pointConfig: otherApi.pointConfig,
}))(PointRule);
